import axios from 'axios'
import { Toast } from 'vant'
import store from '@/store/index'
import { exchangeTokenAPI } from '@/api/userAPI.js'
// 调用 axios.create() 方法，创建 axios 的实例对象
const instance = axios.create({
  // 请求根路径
  baseURL: 'http://toutiao.itheima.net'
})

instance.interceptors.request.use(
  config => {
    // 展示 loading 效果
    Toast.loading({
      message: '加载中...', // 文本内容
      duration: 0 // 展示时长(ms)，值为 0 时，toast 不会消失
    })
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器（注意：响应拦截器也应该绑定给 instance 实例）
// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 隐藏 loading 提示效果
    Toast.clear()
    return response
  },
  async error => {
    Toast.clear()

    // 1. 从 vuex 中获取 tokenInfo 对象，格式为： { token, refresh_token }
    const tokenInfo = store.state.tokenInfo
    // 2. 判断是否为 token 过期
    if (error.response && error.response.status === 401 && tokenInfo.refresh_token) {
      // token 过期
      console.log('token过期啦')
      // 3.1 TODO: 发起请求，根据 refresh_token 重新请求一个有效的新 token
      const { data: res } = await exchangeTokenAPI(tokenInfo.refresh_token)
      // 3.2 TODO: 更新 Store 中的 Token
      store.commit('updateTokenInfo', { token: res.data.token, refresh_token: tokenInfo.refresh_token })
      // 3.3 重新调用刚才“请求未遂”的接口
      // 3.3.1 如果在响应拦截器中 return 一个新的 Promise 异步请求，则会把这次请求的结果，当作上次请求的返回值
      return instance(error.config)
    }
    return Promise.reject(error)
  }
)
export default instance
